<template>
  <router-link to="/" class="home-link">返回</router-link>
<div class="text_detail">
 <h2 class="title">{{ detail.title }}</h2>

 <div class="info">
   <div class="item">
     <el-icon color="var(--infoColor)"><Clock /></el-icon>
     <span>{{ detail.time }}</span>
   </div>
   <div class="item">
     <el-icon color="var(--infoColor)"><View /></el-icon>
     <span>{{ detail.view }}</span>
   </div>
   <div class="item">
     <el-icon color="var(--infoColor)"><Share /></el-icon>
     <span>{{ detail.share }}</span>
   </div>
 </div>

 <pre class="cont">
   {{ detail.desc }}
 </pre>
</div>
</template>

<script setup>
import { useRoute } from 'vue-router';
import TextList from '@/mock/textNews';
import { computed } from 'vue';

const route = useRoute();

const { id } = route.query;

const detail = computed(() => {
return TextList.find((v) => v.id == id) || {};
});
</script>

<style scoped>
.home-link {
margin-right: 2rem; 
font-size: 1.5rem;
color: rgb(207, 196, 194);
}

.text_detail {
background: #fff;
padding: 2em; 
min-height:300vh; 
width: 90%;
}

.title {
color: var(--textColor);
text-align: center;
}

.info {
margin-top: 1em; 
height: 4em; 
display: flex;
align-items: center;
justify-content: center;
}

.item {
margin-right: 1em; 
}

.item span {
font-size: 1rem; 
margin-left: 0.5em; 
color: var(--infoColor);
}

.cont {
color: #666;
line-height: 1.5rem; 
font-size: 1rem;
text-wrap: wrap;
white-space: pre-wrap; 
word-wrap: break-word; 
max-height: 30em; 
padding: 1em;
}

@media (max-width: 768px) {
.text_detail {
 padding: 2em;
 
}

.info {
 flex-direction: column;
 align-items: start;
}

.item {
 margin-bottom: 0.5em; 
}
}
</style>
